
/*
    import from 写法,是同步引入,即从上往下依次执行引入,不能动态引入,会把所有的组件全部引入完成才执行下面代码, webpack 打包的时候会把所有的引入组件集体打包,打包成一个大文件,效率比较慢
    import 函数可以让路由组件单独打包,还支持动态引入
      写法: 路由组件在注册的时候可以是一个组件也可以是一个函数
           写成函数当路由被访问的时候,对应的函数就会调用,然后对应的 import 函数才会执行,动态引入并打包成单独文件
*/
// import Home from '@/views/Home'
const Home = () => import('@/views/Home')
// import Search from '@/views/Search'
const Search = () => import('@/views/Search')

import Login from '@/views/Login'
import Register from '@/views/Register'
import Detail from '@/views/Detail'
import AddCartSuccess from '@/views/AddCartSuccess'
import ShopCart from '@/views/ShopCart'
import Trade from '@/views/Trade'
import Pay from '@/views/Pay'
import PaySuccess from '@/views/PaySuccess'
import Center from '@/views/Center'
import MyOrder from '@/views/Center/MyOrder'
import GroupOrder from '@/views/Center/GroupOrder'
import store from '@/store'

// 所有路由匹配的数据
export default [
  {
    path: '/',
    component: Home
  },
  {
    name: 'search',
    path: '/search/:keyword?',
    component: Search,
    // props: true 只映射 params 参数,用的较少
    props: (route) => {
      return {
        keyword3: route.params.keyword
      }
    }
  },
  {
    path: '/register',
    component: Register,
    meta: {
      isHideFooter: true
    }
  },
  {
    path: '/login',
    component: Login,
    meta: {
      isHideFooter: true
    },
    // 路由独享守卫(重要)
    // beforeEnter: (to, from, next) => {
    //   // 只有没登录才能看到登录的界面
    //   let token = store.state.user.token
    //   if (token) {
    //     next('/')
    //   } else {
    //     next()
    //   }
    // }
  },
  {
    path: '/detail/:skuId',
    component: Detail
  },
  {
    path: '/addcartsuccess',
    component: AddCartSuccess,
    // 只有携带了 skuNum 和 sessionStorage 内部有 skuInfo 数据,才能看到添加购物车成功的界面
    beforeEnter: (to, from, next) => {
      let skuNum = to.query.skuNum
      let skuInfo = sessionStorage.getItem('SKUINFO_KEY')
      if (skuNum && skuInfo) {
        next()
      } else {
        alert('必须带够参数')
        next('/')
      }
    }
  },
  {
    path: '/shopcart',
    component: ShopCart
  },
  {
    path: '/trade',
    component: Trade,
    // 只有从购物车界面才能跳转到交易页面(创建订单)
    beforeEnter: (to, from, next) => {
      if (from.path === '/shopcart') {
        next()
      } else {
        next('/')
      }
    }
  },
  {
    path: '/pay',
    component: Pay,
    // 只有从交易页面(创建订单)页面才能跳转到支付页面
    beforeEnter: (to, from, next) => {
      if (from.path === '/trade') {
        next()
      } else {
        next('/')
      }
    }
  },
  {
    path: '/paysuccess',
    component: PaySuccess,
    // 只有从支付页面才能跳转到支付成功页面
    beforeEnter: (to, from, next) => {
      if (from.path === '/pay') {
        next()
      } else {
        next('/')
      }
    }
  },
  {
    path: '/center',
    component: Center,
    // 路由重定向,两种用法效果相同
    redirect: '/center/myorder',
    children: [
      {
        path: 'myorder',
        component: MyOrder
      },
      {
        path: 'grouporder',
        component: GroupOrder
      },
      // {
      //   path: '',
      //   redirect: 'myorder'
      // }
    ]
  }
]